feat: add PDF export feature to Grid components #16324

Copilot · 2025-10-18T09:48:21Z

PDF Export Feature Implementation - COMPLETE ✅

Summary

Successfully implemented PDF export functionality for Angular Grid components, addressing the feature request to provide PDF export alongside Excel and CSV export options.

Recent Updates (Latest Commit)

Fixed Pivot Grid Export - Row Dimensions

✅ Imported ExportRecordType for proper pivot grid detection
✅ Detects pivot grid records using ExportRecordType.PivotGridRecord
✅ Includes pivotGridFilterFieldsCount in column calculations
✅ Row dimension headers now properly rendered in PDF
✅ Fully aligns with Excel exporter behavior

Implementation Checklist

Key Features Implemented

1. PDF Exporter Service (IgxPdfExporterService)

Extends IgxBaseExporter following the same pattern as Excel/CSV exporters
Generates PDF documents using jspdf library (v3.0.2, no vulnerabilities)
Supports both raw data array and IgxGrid component export
Multi-page support with automatic page breaks
Proper handling of null/undefined values and dates
Text truncation with ellipsis for long content (both headers and cells)
Hierarchical visualization with child tables including headers
Proper summary values display (label: value format)
Multi-level column headers (column groups) support - all levels
Full pivot grid support with row dimension headers

2. PDF Exporter Options (IgxPdfExporterOptions)

pageOrientation: 'portrait' or 'landscape' (default: landscape)
pageSize: 'a4', 'a3', 'letter', 'legal', etc. (default: 'a4')
showTableBorders: Show/hide table borders (default: true)
fontSize: Font size for table content (default: 10)

3. Grid Toolbar Integration

Added PDF export button to IgxGridToolbarExporterComponent
Created IgxPdfTextDirective for customizable button text
Added exportPDF input property to control button visibility (default: true)
Appears in dropdown menu alongside Excel and CSV options

4. Full Internationalization Support

Added translations for all 19 supported languages in igniteui-angular-i18n package

5. Hierarchy Support

TreeGrid:
- Records show proper indentation based on level
- Supports both hierarchical data and flat self-referencing data (foreignKey)
- Base exporter normalizes both data binding modes with proper level property
HierarchicalGrid:
- Parent rows with indentation
- Multi-level child tables with unlimited nesting depth
- Multiple child islands per record (different owners)
- Each child island rendered as separate nested table
- Multi-column headers support at all hierarchy levels
- Child records displayed in separate child tables beneath each parent
- Child tables include their own column headers
- Child tables are indented to show hierarchy
- Hidden/collapsed nodes excluded from export
- Recursive rendering handles all child islands at all levels

6. Column Groups Support

Multi-level column headers exported correctly at all hierarchy levels
Parent column groups span across child columns
Headers are drawn level by level maintaining hierarchy
Proper columnSpan and positioning based on startIndex
Compatible with both grouped and non-grouped column layouts
Supports deeply nested column group structures (3+ levels)
Header text truncation prevents overflow and overlapping
Works with hierarchical grids and all child levels

7. Summary Support

Summary records display actual calculated values
Formatted as "label: value" (e.g., "Count: 5", "Sum: 1234.56")
Consistent with Excel export format
Handles summaries in all grid types

8. Pivot Grid Support

✅ Properly exports row dimension headers (filter fields)
✅ Includes dimension columns in the leftmost columns
✅ Aggregated data columns follow dimension columns
✅ Consistent with Excel export format
✅ Supports multi-level pivot configurations
✅ Uses ExportRecordType.PivotGridRecord for detection
✅ Adjusts column count with pivotGridFilterFieldsCount

9. ng-add Schematic

Added jspdf to DEPENDENCIES_MAP for automatic installation
When running ng add igniteui-angular, jspdf will be automatically included

10. Interactive Demo Component

Located at src/app/grid-pdf-export/
Shows direct IgxPdfExporterService API usage
Configuration panel for all export options
Examples with regular grid, tree grid, hierarchical grid, and pivot grid
All grids demonstrate different features (multi-column headers, summaries, hierarchy, aggregations)

11. Comprehensive Test Coverage

35+ tests covering all major features and advanced scenarios
Tests for service, grid integration, and toolbar component
Coverage for orientations, page sizes, fonts, pagination, events, and options
Advanced scenario tests: Multi-column headers, summaries, hierarchical grids, tree grids
Tests for both hierarchical data and flat self-referencing data in tree grids
Test for header text truncation with nested column groups

12. Documentation

CHANGELOG.md updated with comprehensive entry for version 21.0.0
Includes usage examples, key features, and configuration options

Build Status: ✅ TypeScript compilation successful
Lint Status: ✅ Passed
Code Review: ✅ All feedback addressed
Security: ✅ No vulnerabilities ([email protected] vetted)
i18n: ✅ All 19 languages updated
Schematics: ✅ jspdf added to dependencies map
Demo: ✅ Interactive demo with all grid types (regular, tree, hierarchical, pivot)
Test Coverage: ✅ 35+ comprehensive tests
Documentation: ✅ CHANGELOG.md updated

Ready for merge! 🚀

Original prompt

This section details on the original issue you should resolve

<issue_title>pdf Export feature on Angular Grid</issue_title>
<issue_description>pdf export is very common requirement from client side. we like Angular grid but missing export to pdf is annoying customers. Please provide export to pdf fetaure along with Excel & csv.

## Describe the solution you'd like
Please provide export to pdf fetaure along with Excel & csv on Angular Grid.

</issue_description>

<agent_instructions>Implement an igxPdfExportService similar to our igxExcelExportService for exporting the grid components in the library in a pdf format. The igx-grid-toolbar-actions for export should also include a button for exporting to pdf, in addition to the excel and csv export that it currently has</agent_instructions>

Comments on the Issue (you are @copilot in this section)
@radomirchev @deepakvia the issue is not scheduled for the current milestone in our 2019 Roadmap. However is is listed in the queue for the next milestone, starting Jan 2020. You could follow the Roadmap content and progress either on the [Roadmap Board](https://github.com/orgs/IgniteUI/projects) or in the [Roadmap document](https://github.com/IgniteUI/igniteui-angular/blob/master/README.md). @kdinev @therrlich So far we haven't been able to spend time on the pdf export. We will be evaluating the priorities for our upcoming milestone after the release of version 12.0.0, which will happen shortly after the release of Angular 12 (May 12th). @kdinev @Eralmidia We tried the following library: https://www.npmjs.com/package/jspdf and it seems to handle the pdf export pretty well, so we decided it's not worth it to try to recreate the logic from scratch if there's already an existing OSS lib for this. @kdinev @dkamburov @gedinakova @rkaraivanov Did we end up creating a sample for internal use? If yes, then we should probably publish it in the public samples. If no, then let's put one together. @kdinev @therrlich To give some context. The demo we were playing with was exporting the grid data within a pdf table using the aforementioned library. We will try to provide a sample ASAP. @ChronosSF @Eralmidia , I logged https://github.com/IgniteUI/igniteui-angular-samples/issues/3509 to track the sample effort.

Fixes #5696

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Co-authored-by: kdinev <[email protected]>

…gniteUI/igniteui-angular into copilot/add-pdf-export-feature

kdinev · 2025-10-18T10:16:17Z

projects/igniteui-angular/core/src/core/i18n/grid-resources.ts

@@ -318,6 +319,7 @@ export const GridResourceStringsEN: IGridResourceStrings = {
    igx_grid_toolbar_exporter_button_label: 'Export',
    igx_grid_toolbar_exporter_excel_entry_text: 'Export to Excel',
    igx_grid_toolbar_exporter_csv_entry_text: 'Export to CSV',
+    igx_grid_toolbar_exporter_pdf_entry_text: 'Export to PDF',


@copilot Add translations for this resource string to all supported language resources.

Added translations for igx_grid_toolbar_exporter_pdf_entry_text to all 19 supported language resource files (BG, CS, DA, DE, ES, FR, HU, IT, JA, KO, NB, NL, PL, PT, RO, SV, TR, ZH-HANS, ZH-HANT). Each translation follows the same pattern as the existing Excel and CSV export strings in that language. Commit: 4c01c0f

Co-authored-by: kdinev <[email protected]>

kdinev

The pdf export from IgxHierarchicalGridComponent and IgxTreeGridComponent does not show any hierarchy in the exported visualisation. Export with hierarchical visualisation in pdf, similar to how excel hierarchical visualisations are exported.

kdinev · 2025-10-18T12:16:40Z

@copilot Address the latest comment and also update the ng add schematic for the igniteui-angular library to include the new dependency on jspdf and the schematics tests should pass then.

- Added indentation support for TreeGrid and HierarchicalGrid records in PDF export - Records with level property now indent by 15pt per level in first column - Skip hidden records (collapsed hierarchy nodes) from export - Added jspdf to ng-add schematic dependencies map for automatic installation Co-authored-by: kdinev <[email protected]>

Copilot · 2025-10-18T12:22:30Z

@copilot Address the latest comment and also update the ng add schematic for the igniteui-angular library to include the new dependency on jspdf and the schematics tests should pass then.

Implemented both requested changes:

Hierarchy visualization: PDF export now shows indentation for TreeGrid and HierarchicalGrid records, similar to Excel export. Records indent by 15pt per level in the first column, and hidden/collapsed nodes are excluded.
ng-add schematic: Added jspdf to the DEPENDENCIES_MAP in the schematic's dependency-handler, so it will be automatically installed when users run ng add igniteui-angular.

Commit: 94e7d39

kdinev · 2025-10-18T12:29:23Z

@copilot Grids are usually wide, so make the default pageOrientation option for grid export to be landscape.

Grids are typically wide, so landscape orientation is more suitable as the default for grid exports. Co-authored-by: kdinev <[email protected]>

Copilot · 2025-10-18T12:31:26Z

@copilot Grids are usually wide, so make the default pageOrientation option for grid export to be landscape.

Changed default pageOrientation to 'landscape' in IgxPdfExporterOptions. This is more suitable for typical grid exports which tend to be wide. Commit: e7f2a91

* refactor(exporters): moving exporters under grids/core * test(excel exporter): fixing import paths from /core

* refactor(exporters): moving exporters under grids/core * test(excel exporter): fixing import paths from /core * feat(pdf exporter): making jsPDF a dynamic import * chore(*): fixing incorrect block indentation

projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-grid.spec.ts

rkaraivanov

With a side note that there are several key areas for refactoring.
However, this could be achieved after release since we are time-pressed now.

outdated: requests have been long addressed

damyanpetev

Some minor cleanup, otherwise should be fine.

projects/igniteui-angular/schematics/utils/dependency-handler.ts

.gitignore

Initial plan

9414393

Copilot AI assigned Copilot and kdinev Oct 18, 2025

Copilot started work on behalf of kdinev October 18, 2025 09:48 View session

Copilot AI and others added 7 commits October 18, 2025 09:58

Add PDF export service and integrate with grid toolbar

79390c0

Co-authored-by: kdinev <[email protected]>

Fix build configuration for PDF export service

3569c03

Co-authored-by: kdinev <[email protected]>

Add PDF export grid integration tests

ae94f01

Co-authored-by: kdinev <[email protected]>

Fix test cleanup in PDF exporter grid tests

b2ecfc1

Co-authored-by: kdinev <[email protected]>

Add pdf export keyword to package.json

8b09ed1

Co-authored-by: kdinev <[email protected]>

chore(*): adding jspdf to dependencies on repo level

80529b4

Merge branch 'copilot/add-pdf-export-feature' of https://github.com/I…

c06d3ea

…gniteUI/igniteui-angular into copilot/add-pdf-export-feature

Copilot AI changed the title ~~[WIP] Add PDF export feature to Angular Grid~~ Add PDF export feature to Angular Grid components Oct 18, 2025

Copilot AI requested a review from kdinev October 18, 2025 10:13

Copilot finished work on behalf of kdinev October 18, 2025 10:13

kdinev requested changes Oct 18, 2025

View reviewed changes

Copilot started work on behalf of kdinev October 18, 2025 10:16 View session

Add PDF export translations for all supported languages

b98b3f8

Co-authored-by: kdinev <[email protected]>

Copilot AI requested a review from kdinev October 18, 2025 10:23

Copilot finished work on behalf of kdinev October 18, 2025 10:23

kdinev previously requested changes Oct 18, 2025

View reviewed changes

Copilot started work on behalf of kdinev October 18, 2025 12:17 View session

Copilot AI requested a review from kdinev October 18, 2025 12:23

Copilot finished work on behalf of kdinev October 18, 2025 12:23

Copilot started work on behalf of kdinev October 18, 2025 12:29 View session

Change default PDF export page orientation to landscape

fea4fa0

Grids are typically wide, so landscape orientation is more suitable as the default for grid exports. Co-authored-by: kdinev <[email protected]>

gedinakova and others added 11 commits November 25, 2025 18:01

chore(*): Bring PDF exporter tests back

b1088db

refactor(exporters): moving exporters under grids/core (#16519)

7d45cb4

* refactor(exporters): moving exporters under grids/core * test(excel exporter): fixing import paths from /core

chore(*): remove duplicate tslib dependency

49e7e3f

Merge branch 'master' into copilot/add-pdf-export-feature

48eb3e1

Merge branch 'master' into copilot/add-pdf-export-feature

bdeaf61

feat(pdf exporter): making jsPDF a dynamic import (#16524)

60af3ee

* refactor(exporters): moving exporters under grids/core * test(excel exporter): fixing import paths from /core * feat(pdf exporter): making jsPDF a dynamic import * chore(*): fixing incorrect block indentation

fix(*): Fixed the pdf exporter failing test

c46fd61

Merge branch 'master' into copilot/add-pdf-export-feature

cd2bf4f

test(pdf export): adding pivot grid export tests

f3e2a5b

chore(*): Fixed failing tests for PivotGrid PDF exporter

6be0ac5

chore(*): Make lint happy

d7436e6

damyanpetev reviewed Nov 27, 2025

View reviewed changes

projects/igniteui-angular/grids/core/src/services/pdf/pdf-exporter-grid.spec.ts Outdated Show resolved Hide resolved

test(pdf-exported): remove duplicate/redundant spy call

1970b14

rkaraivanov previously approved these changes Nov 27, 2025

View reviewed changes

rkaraivanov added the squash-merge Merge PR with "Squash and Merge" option label Nov 27, 2025

gedinakova requested a review from damyanpetev November 27, 2025 12:31

damyanpetev changed the title ~~Add PDF export feature to Angular Grid components~~ feat: add PDF export feature to Grid components Nov 27, 2025

fix(pivot): add only unique keys to rowDimensionFields

d9937a2

mtsvyatkova dismissed rkaraivanov’s stale review via d9937a2 November 27, 2025 13:53

damyanpetev reviewed Nov 27, 2025

View reviewed changes

projects/igniteui-angular/schematics/utils/dependency-handler.ts Outdated Show resolved Hide resolved

.gitignore Outdated Show resolved Hide resolved

Apply suggestions from code review

b455021

damyanpetev previously approved these changes Nov 27, 2025

View reviewed changes

test(schematics): drop obsolete fflate checks

13f76ad

damyanpetev dismissed their stale review via 13f76ad November 27, 2025 14:23

damyanpetev approved these changes Nov 27, 2025

View reviewed changes

damyanpetev added ✅ status: verified Applies to PRs that have passed manual verification and removed ❌ status: awaiting-test PRs awaiting manual verification labels Nov 27, 2025

damyanpetev merged commit b1794c1 into master Nov 27, 2025
7 checks passed

damyanpetev deleted the copilot/add-pdf-export-feature branch November 27, 2025 14:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add PDF export feature to Grid components #16324

feat: add PDF export feature to Grid components #16324

Uh oh!

Copilot AI commented Oct 18, 2025 •

edited

Loading

Uh oh!

kdinev Oct 18, 2025

Uh oh!

Copilot AI Oct 18, 2025

Uh oh!

kdinev left a comment

Uh oh!

kdinev commented Oct 18, 2025

Uh oh!

Copilot AI commented Oct 18, 2025

Uh oh!

kdinev commented Oct 18, 2025

Uh oh!

Copilot AI commented Oct 18, 2025

Uh oh!

Uh oh!

rkaraivanov left a comment

Uh oh!

damyanpetev left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

feat: add PDF export feature to Grid components #16324

feat: add PDF export feature to Grid components #16324

Uh oh!

Conversation

Copilot AI commented Oct 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PDF Export Feature Implementation - COMPLETE ✅

Summary

Recent Updates (Latest Commit)

Implementation Checklist

Key Features Implemented

Comments on the Issue (you are @copilot in this section)

Uh oh!

kdinev Oct 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 18, 2025

Choose a reason for hiding this comment

Uh oh!

kdinev left a comment

Choose a reason for hiding this comment

Uh oh!

kdinev commented Oct 18, 2025

Uh oh!

Copilot AI commented Oct 18, 2025

Uh oh!

kdinev commented Oct 18, 2025

Uh oh!

Copilot AI commented Oct 18, 2025

Uh oh!

Uh oh!

rkaraivanov left a comment

Choose a reason for hiding this comment

Uh oh!

damyanpetev left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

Copilot AI commented Oct 18, 2025 •

edited

Loading